<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>左侧菜单</title>
<!--  <link href="css/style.css" rel="stylesheet" type="text/css" />-->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <script src="js/jquery.js"></script>
  <style>
    body {
      background: #f0f9fd;
      font-family: "Microsoft YaHei", Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    .lefttop {
      background: #2980b9;
      height: 40px;
      color: #fff;
      font-size: 14px;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
    }

    .leftmenu {
      width: 100%;
      padding: 0;
      margin: 0;
    }

    .leftmenu dd {
      margin: 0;
      padding: 0;
    }

    .title {
      background: #3498db;
      color: #fff;
      padding: 10px 15px;
      cursor: pointer;
      font-weight: bold;
      border-bottom: 1px solid #2980b9;
    }

    .menuson {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .menuson li {
      border-bottom: 1px solid #e5e5e5;
    }

    .menuson li a {
      display: block;
      padding: 10px 15px 10px 25px;
      color: #333;
      text-decoration: none;
      font-size: 14px;
      position: relative;
    }

    .menuson li a:before {
      content: "•";
      position: absolute;
      left: 10px;
      color: #3498db;
    }

    .menuson li a:hover {
      background: #ecf0f1;
      color: #1abc9c;
    }

    .menuson li.active a {
      background: #ecf0f1;
      color: #1abc9c;
    }
  </style>
  <script type="text/javascript">
    $(function(){
      //导航切换
      $(".menuson li").click(function(){
        $(".menuson li.active").removeClass("active")
        $(this).addClass("active");
      });

      $('.title').click(function(){
        var $ul = $(this).next('ul');
        $('dd').find('ul').slideUp();
        if($ul.is(':visible')){
          $(this).next('ul').slideUp();
        }else{
          $(this).next('ul').slideDown();
        }
      });
    })
  </script>
</head>

<body>

<dl class="leftmenu">
  <dd>
    <div class="title">
      学生管理
    </div>
    <ul class="menuson">
      <li class="active"><a href="students.html" target="rightFrame">学生列表</a></li>
    </ul>
  </dd>
</dl>
</body>
</html>
